<!-- 组件 置顶 -->
<template>
  <div class="Istop" v-show="toTopShow">
    <van-icon name="back-top" class="Istop-icon" @click="scrollTo"/>
  </div>
</template>

<script>
export default {
  name: "Istop",
  data(){
    return{
      toTopShow:false, 
    }
  },
  mounted(){
    window.addEventListener('scroll', this.handleScroll);
  },
  methods:{
    // 回到顶部
    scrollTo(){
      window.scrollTo(0, 0);
    },
    // 滚轮事件
   handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.toTopShow = scrollTop > 300 ;
    },
  }
};
</script>

<style lang="scss" scoped>
.Istop{
  position: fixed;
  right: 40px;
  bottom: 29px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 1px 20px 0px rgb(0 0 0 / 10%), inset 0px -1px 0px 0px rgb(0 0 0 / 10%);
  &-icon{
    display: flex;
    justify-content: center;
    font-size: 21px;
    line-height: 30px;
  }
}
</style>
